<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no, width=device-width, minimum-scale=1, maximum-scale=1" />
    <title>Dragon - Hilo Example</title>
    <style>
        html, body, div{
            margin:0px;
            padding:0px;
            -webkit-user-select: none;
        }

        canvas{
            margin:10px auto;
            display: block;
            position: relative !important;
            background: #eefffe;
        }

        .info{
            text-align: center;
            font-size:14px;
        }
    </style>
</head>
<body>
    <script src='../../../../build/standalone/hilo-standalone.min.js'></script>
    <script src='../../../../build/dragonbones/dragonbones.min.js'></script>
    <script src='./data/dragon/skeleton.js'></script>
    <script src='./data/dragon/texture.js'></script>
    <div id='stage'></div>
    <div class='info'>点击切换骨骼动画(素材来自DragonBones官网)</div>
    <script>
        var dragonbonesFactory, armature, armatureDisplay, stage, ticker;
        stage = new Hilo.Stage({
            container:'stage',
            width:Math.min(innerWidth, 440),
            height:Math.min(innerHeight, 600),
            renderType:'webgl'
        });

        ticker = new Hilo.Ticker(60);
        ticker.addTick(stage);
        ticker.start();

        var initArmature = function(){
            dragonbonesFactory = new dragonBones.HiloFactory();
            dragonbonesFactory.addTextureAtlas(new dragonBones.TextureAtlas(textureImage, textureData));
            dragonbonesFactory.addDragonBonesData(dragonBones.DataParser.parseDragonBonesData(skeletonData));

            armature = dragonbonesFactory.buildArmature(skeletonData.armature[0].name);
            dragonBones.WorldClock.clock.add(armature);

            armatureDisplay = armature.getDisplay();
            armatureDisplay.x = (stage.width >> 1) - 30;
            armatureDisplay.y = (stage.height >> 1) + 50;
            armatureDisplay.scaleX = armatureDisplay.scaleY = 0.4;
            stage.addChild(armatureDisplay);

            ticker.addTick(dragonBones);

            var list = armature.animation._animationList;
            var animIndex = 0;
            armature.animation.gotoAndPlay(list[animIndex], -1, -1, 0);

            window.addEventListener(Hilo.event.POINTER_START, function(){
                animIndex = (++animIndex)%list.length;
                armature.animation.gotoAndPlay(list[animIndex], -1, -1, 0);
            });
        };

        var textureImage = new Image();
        textureImage.onload = function(){
            initArmature();
        };
        textureImage.src = './data/dragon/texture.png';

    </script>
</body>
</html>